<template>
  <!-- //是一个一级路由页面  里面就写下面的四个 电影 影院  资讯  我的 -->
  <div class="page-home">
    <div class="home-content">
      <!-- <p>首页</p> -->
      <!-- 这个坑是为了显示二级路由页面 -->
      <router-view></router-view>
    </div>
    <mt-tabbar v-model="selected">
      <mt-tab-item
        v-for="tab in tabs"
        :key="tab.id"
        :id="tab.id"
        :href="tab.href">
        <i slot="icon" :class="['iconfont', tab.icon]"></i>
        {{ tab.name }}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      selected: 1,
      tabs: [
        {
          id: 1,
          name: '电影',
          icon: 'icon-dianying',
          href: '/#/films'
        },
        {
          id: 2,
          name: '影院',
          icon: 'icon-dianying1',
          href: '/#/cinemas'
        },
        {
          id: 3,
          name: '资讯',
          icon: 'icon-zixun',
          href: 'http://www.baidu.com'
        },
        {
          id: 4,
          name: '我的',
          icon: 'icon-wode',
          href: '/#/center'
        }
      ]
    }
  },
  wathch: {
    $route: {
      hander (newVal) {
        this.selected = newVal.meta.tabId
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.page-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  .mint-tabbar {
    .mint-tab-item {
      color: #797d82;
      &.is-selected {
        color: #ff5f16;
      }
    }
    .iconfont {
      font-size: 22px;
      margin: 2px 0;
    }
  }
}
</style>
